<template>
	<view>
		<view class="status_bar">
		</view>
		<view class="userinfo" @click="goPage('userinfo')">
			<view style="display: flex;align-items: center;">
				<u-avatar :src="userInfo.avatar" size="60"></u-avatar>
				<view style="margin-left: 10px;">
					<h3 style="display: flex;align-datas: center;">{{userInfo.nickname}}<u-icon
							name="/static/other/xunzhang.png" size="25" v-if="userInfo.identity=='认证'" /></h3>
					<view style="display: flex;margin-top: 5px;font-size:13px;color: #606266;">
						{{userInfo.vip>new Date().getTime()?'有效期至:'+$u.timeFormat(new Date(userInfo.vip), 'yyyy年mm月dd日'):'感谢你的使用~'}}
					</view>
				</view>
			</view>
		</view>
		<view class="tools">
			<view @click="goPage('pay')">
				<u-icon space="5" labelPos="bottom" labelSize="12" label="充值中心" size="35" name="rmb-circle"></u-icon>
			</view>
			<view @click="goPage('template')">
				<u-icon space="5" labelPos="bottom" labelSize="12" label="模板中心" size="35" name="grid"></u-icon>
			</view>
			<view @click="goPage('browser',
							'?url=https://apifox.com/apidoc/shared-23f01b40-9685-41dd-9904-d461fb70a799/api-203462417')">
				<u-icon space="5" labelPos="bottom" labelSize="12" label="接口文档" size="35" name="file-text"></u-icon>
			</view>
			<view @click="goPage('feedback')">
				<u-icon space="5" labelPos="bottom" labelSize="12" label="意见反馈" size="35" name="chat"></u-icon>
			</view>
		</view>
		<view class="tool">
			<view class="tool-item" @click="goPage('lanzou')">
				<view style="display: flex;align-items: center;">
					<p style="font-size: 14px;margin-left: 5px;">关联蓝奏</p>
				</view>
				<u-icon name="arrow-right" size="25"></u-icon>
			</view>
			<u-divider style="margin: 5px;"></u-divider>
			<view class="tool-item" @click="goPage('service')">
				<view style="display: flex;align-items: center;">
					<p style="font-size: 14px;margin-left: 5px;">客服中心</p>
				</view>
				<u-icon name="arrow-right" size="25"></u-icon>
			</view>
			<u-divider style="margin: 5px;"></u-divider>
			<view class="tool-item" @click="goPage('about')">
				<view style="display: flex;align-items: center;">
					<p style="font-size: 14px;margin-left: 5px;">关于我们</p>
				</view>
				<u-icon name="arrow-right" size="25"></u-icon>
			</view>
			<u-divider style="margin: 5px;"></u-divider>
			<view class="tool-item" @click="shareapp">
				<view style="display: flex;align-items: center;">
					<p style="font-size: 14px;margin-left: 5px;">分享应用</p>
				</view>
				<u-icon name="arrow-right" size="25"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database();
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				userInfo: store.state.userInfo,
			};
		},
		onShow() {
			this.init()
		},
		onPullDownRefresh() {
			this.init()
		},
		methods: {
			shareapp() {
				if (this.client == 'web') {
					this.copy("https://www.x2.ink/", "链接复制成功")
					return
				}
				uni.share({
					provider: "qq",
					type: 0,
					title: "小二云盘",
					href: "https://www.x2.ink/",
					imageUrl: "https://mp-e8736984-eb69-4fda-8fbc-8b94a79af7f9.cdn.bspapp.com/icon/logo.png",
					summary: "让分享变得更容易，让分享变得更个性！文件可自定义展示图，自动获取安装包信息等强大功能"
				});
			},
			init() {
				this.getUserInfo().then(res => {
					this.userInfo = res
				})
				uni.stopPullDownRefresh()
			},
		}
	}
</script>
<style lang="scss">
	.tools {
		background-color: white;
		padding: 15px 10px;
		margin: 10px;
		border-radius: 10px;
		display: flex;
		justify-content: space-around;
	}

	.status_bar {
		height: var(--status-bar-height);
	}

	.userinfo {
		padding: 10px;
		margin: 80px 10px 20px 10px;
		position: relative;
		display: flex;
		align-items: center;
	}

	.tool {
		margin: 10px;
		border-radius: 10px;
		background-color: white;
		padding: 10px;

		.tool-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 35px;
		}
	}
</style>